<template>
  <div class="tab">
    <van-tabs v-model:active="active" @change="changeTab">
      <div v-for="(item, index) in topBar" :key="item.id">
        <van-tab :title="item.label" :name="index">
          <List :list="newsList"></List>
        </van-tab>
      </div>
      
    </van-tabs>
  </div>
</template>
<script>
// import axios from "axios";
import { getNewsList,getHotList,getOrgList,getTuiList} from "@/api/list.js";
import List from "@/components/home/List.vue";
export default {
  name: "Tab",
  components: { List },
  data() {
    return {
      active: "",//选中项
      newsList: [], //新闻数据
      topBar: [], //tab栏
    };
  },
  created() {
    this.getNewData();
    this.getTuiData();
    this.getOrgData();
    this.getHotData();
  },
  mounted() {},
  methods: {
    changeTab() {
      if (this.active == 1) {
        this.getTuiData();
      }
      if (this.active == 2) {
        this.getOrgData();
      }
      if (this.active == 3) {
        this.getHotData();
      }
      if(this.active==0){
        this.getNewData()
      }
    },
    // 新闻
    async getNewData() {
      getNewsList().then((res) => {
        this.topBar = res.data.topBar;
        this.newsList = res.data.news;
      });
    },
    // 推荐的接口
    async getTuiData() {
      getTuiList().then((res) => {
        this.newsList = res.data.list;
      });
    },
    // 原创
    async getOrgData() {
      getOrgList().then((res) => {
        this.newsList = res.data.list;
      });
    },
    // 热点
    async getHotData() {
      getHotList().then((res) => {
        this.newsList = res.data.hot;
      });
    },
  },
};
</script>
